<template>
    <!--该组件本来是在  index 中被调用，现在重构了一下顶部导航栏（涉关currentUser对象），
        原来的链接改为了 “进入我的主页>>”
        而且目前打算把个人信息这个模块搬到我的主页中去，
        所以目前当前组件还不可用。（我的主页中相应内容也还没写）-->
    <div>
        <el-row class="h1_row">
            <el-col :span="4" :offset="1">
                <h1>个人资料</h1>
            </el-col>
        </el-row>

        <!--编辑状态表单-->
        <div v-show="edit">
            <el-form label-position="top" label-width="80px" :model="editUser" class="personInfo" id="editForm">
                <el-row :gutter="50" >
                    <el-col :span="11" :offset="1">
                        <el-form-item label="用户名 (不可修改)">
                            <el-input v-model="editUser.uname" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="用户头像">
                            <!--on-change 添加文件、上传成功和上传失败时都会被调用-->
                            <el-upload
                                    ref="headImg"
                                    :on-change="handleFileChange"
                                    :auto-upload="false"
                                    name="file"
                                    class="avatar-uploader"
                                    :action= "this.GLOBAL.serverBaseUrl + this.GLOBAL.userTestFile"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :on-error="handleAvatarError"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="editUser.headImg" :src="editUser.headImg" class="avatar" alt="">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="昵称">
                            <el-input v-model="editUser.nickName"></el-input>
                        </el-form-item>
                    </el-col >
                    <el-col :span=11>
                        <el-form-item label="个性签名">
                            <el-input v-model="editUser.motto"></el-input>
                        </el-form-item>
                        <el-form-item label="账号角色 (不可修改)">
                            <el-input v-model="editUser.role" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="生日">
                            <!--通过value-format="yyyy-MM-dd"  指定值的格式  默认返回的是Date对象  如：Sat Apr 10 2021 00:00:00 GMT+0800 (中国标准时间)-->
                            <el-date-picker value-format="yyyy-MM-dd"
                                            v-model="editUser.birthday"
                                            type="date"
                                            placeholder="设置您的出生日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="所在地区">
<!--                            <el-input v-model="editUser.area"></el-input>-->
                            <el-cascader
                                         clearable
                                         v-model="editUser.area"
                                         :options="options"
                                         :props="{ expandTrigger: 'hover' }"
                                         @change="handleChange"></el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :offset="1" :span="22">
                        <el-form-item label="个人简介">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 3, maxRows: 5}"
                                    placeholder="简单介绍一下自己，（不大于300个字符）"
                                    v-model="editUser.intro">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row type="flex" justify="center">
                <el-col :span="4">
                    <el-button round size="medium" @click="cancelEdit()">取消</el-button>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" round size="medium" @click="submitEdit()">保存</el-button>
                </el-col>
            </el-row>
        </div>

        <!--正常显示用户个人资料信息-->
        <div v-show="!edit">
            <!--头像 + 用户名-->
            <el-row type="flex" justify="center">
                <el-col :span="5">
                    <el-avatar :size="125" :src="indexUser.headImg" ></el-avatar>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center" style="line-height: 34px">
                <el-col :span="2">
                    <span style="color: #99a9bf">用户名：</span>
                </el-col>
                <el-col :span="4">
                    <span>{{indexUser.uname}}</span>
                </el-col>
            </el-row>

            <!--其他个人信息  （不包括邮箱和密码，这两个将在账号设置中进行绑定修改） -->
            <el-row class="info_row">
                <el-col :span="20" :offset="1">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="昵称">
                            <span>{{ indexUser.nickName }}</span>
                        </el-form-item>
                        <el-form-item label="个性签名">
                            <span>{{ indexUser.motto }}</span>
                        </el-form-item>
                        <el-form-item label="生日">
                            <span>{{ indexUser.birthday }}</span>
                        </el-form-item>
                        <el-form-item label="所在地区">
                            <!--                        <span>{{ currentUser.area }}</span>-->
                            <span v-for="area in indexUser.area" :key="area"><el-divider direction="vertical"></el-divider>{{area}}</span>

                        </el-form-item>
                        <el-form-item label="个人简介">
                            <span>{{ indexUser.intro }}</span>
                        </el-form-item>
                        <el-form-item label="账号角色">
                            <span v-if="indexUser.role === 'admin'"><i class="el-icon-user-solid"></i>&nbsp;管理员</span>
                            <span v-else><i class="el-icon-user"></i>&nbsp;普通用户</span>
                            <!--                        <span>{{ currentUser.role }}</span>-->
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="2" v-if="isMyIndex">
                    <el-link type="primary" v-on:click="edit = true"><i class="el-icon-edit"></i>&nbsp;编&nbsp;辑</el-link>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        name: "personInfo",
        data(){
            return{
                options: [{
                    value: '江西省',
                    label: '江西省',
                    children: [{
                        value: '南昌市',
                        label: '南昌市',
                    },
                        {
                            value: '新余市',
                            label: '新余市',
                        },{
                            value: '景德镇',
                            label: '景德镇',
                        },{
                            value: '吉安市',
                            label: '吉安市',
                        }]
                },{
                    value: '江苏省',
                    label: '江苏省',
                    children: [{
                        value: '苏州市',
                        label: '苏州市',
                    },
                        {
                            value: '南京市',
                            label: '南京市',
                        }]
                },{
                    value: '湖南省',
                    label: '湖南省',
                    children: [{
                        value: '长沙市',
                        label: '长沙市',
                    },
                        {
                            value: '张家界',
                            label: '张家界',
                        }]
                }],
                edit: false,  /*是否处于编辑状态  默认不处于编辑状态*/
                // indexUser: { /*当前主页用户*/
                //     name: '',
                //     password: '',
                //     nickName: '',
                //     motto: '',
                //     email: '',
                //     birthday: '',
                //     area: [],  /*数组类型*/
                //     intro: '',
                //     headImg: '',  /*头像图片在服务器存储的文件名  （以用户名保存）*/
                //     role: '',  /*身份角色*/
                //     simpleReg: true, /*简单注册，只提交用户名和密码注册，  */
                // },
                indexUser: {}, /*当前主页用户*/
                // editUser: { /*编辑表单用户数据*/
                //     name: '',
                //     password: '',
                //     nickName: '',
                //     motto: '',
                //     email: '',
                //     birthday: '',
                //     area: [],  /*数组类型*/
                //     intro: '',
                //     headImg: '',  /*头像图片在服务器存储的文件名  （以用户名保存）*/
                //     role: '',  /*身份角色*/
                //     simpleReg: true, /*简单注册，只提交用户名和密码注册，  */
                // },
                editUser: {},  /*编辑表单用户数据*/
                originalHeadImg: '' /*原来的头像文件名  -- 只是用于后端删除原头像名称，其实不在这里也可以，直接在数据库查就好了*/
            }
        },
        props: ["indexUname", "isMyIndex"],
        created(){  /*加载页面时执行*/
            /*页面加载时获取后端的当前用户信息*/
            /*初始化用户信息*/
            // this.$http.get("http://localhost:8081/user/getUser").then(req=>{
            // this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.userGet).then(req=>{
            //     /*即使 后台返回的是null  req.data也不是null  而是空字符串""  */
            //     if (req.data !== ""){  /*从登陆过来的   session中有当前登录用户的相关信息  对页面进行初始化*/
            //         this.currentUser.name = req.data.uname;
            //         this.currentUser.password = req.data.upwd;
            //         this.currentUser.nickName = req.data.nickName;
            //         // this.currentUser.headImg = "http://localhost:8081/static/images/userAvatar/" + req.data.headImg;
            //         this.currentUser.headImg = this.GLOBAL.serverBaseUrl + this.GLOBAL.userHeadImg + req.data.headImg;
            //         this.currentUser.motto = req.data.motto;
            //         this.currentUser.email = req.data.email;
            //         this.currentUser.birthday = req.data.birthday;
            //         this.currentUser.area = req.data.area;
            //         this.currentUser.intro = req.data.intro;
            //         this.currentUser.role = req.data.role;
            //         // console.log("head:" + this.currentUser.headImg);
            //         // console.log("area:" + this.currentUser.area);
            //         /*如果直接赋值   传递的是引用  指向同一片内存空间，值的修改是双向的*/
            //         /*这里先把currentUser转为json字符串，再把json字符串转为 js对象   实现浅拷贝*/
            //         this.editUser = JSON.parse(JSON.stringify( this.currentUser));
            //         if (this.editUser.role === 'admin'){
            //             this.editUser.role = "管理员";
            //         }else {
            //             this.editUser.role = "普通用户";
            //         }
            //         this.originalHeadImg = req.data.headImg;
            //         // console.log("editUser:" + this.editUser.name + "  head:" + this.editUser.headImg);
            //         // this.editUser.name = "123";
            //         // console.log("editUser:" + this.editUser.name);
            //         // console.log("currentUser:" + this.currentUser.name);
            //     }else {
            //         this.$notify.error({
            //             title: '错误：',
            //             message: '糟糕，服务器出事了。。',
            //             offset: 50  /*使弹出的消息距屏幕边缘偏移一段距离*/
            //         });
            //     }
            // });

            /*获取当前主页的用户信息*/
            this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.userSpGet + '/' + this.indexUname).then(req=>{
                /*即使 后台返回的是null  req.data也不是null  而是空字符串""  */
                if (req.data !== ""){
                    if (req.data.rs.result_code === 200) { /*查询成功   */
                        // this.indexUser = req.data.user;  // 浅拷贝  两者指向同一对象
                        this.indexUser = JSON.parse(JSON.stringify(req.data.user));  // 通过json转化 实现深拷贝

                        // 完整头像 url地址
                        this.indexUser.headImg = this.GLOBAL.serverBaseUrl + this.GLOBAL.userHeadImg + this.indexUser.headImg;

                        // 初始化 editUser
                        // console.log("head:" + this.currentUser.headImg);
                        // console.log("area:" + this.currentUser.area);
                        /*如果直接赋值   传递的是引用  指向同一片内存空间，值的修改是双向的*/
                        /*这里先把currentUser转为json字符串，再把json字符串转为 js对象   实现深拷贝*/
                        this.editUser = JSON.parse(JSON.stringify( this.indexUser));
                        if (this.editUser.role === 'admin'){
                            this.editUser.role = "管理员";
                        }else {
                            this.editUser.role = "普通用户";
                        }
                        this.originalHeadImg = req.data.user.headImg;
                    } else {  /*查询失败*/
                        this.$notify.error({
                            title: '错误',
                            message: req.data.rs.msg
                        });
                    }
                }else {
                    this.$notify.error({
                        title: '错误：',
                        message: '糟糕，服务器出事了。。',
                        offset: 50  /*使弹出的消息距屏幕边缘偏移一段距离*/
                    });
                }
            });
        },
        methods:{
            /*提交编辑的数据*/
            submitEdit(){
                /*提交除密码、邮箱、角色之外的信息到后台进行更新*/
                let formData = new FormData(document.getElementById("editForm"));
                formData.append("uname", this.editUser.uname);
                formData.append("nickName", this.editUser.nickName);
                formData.append("motto", this.editUser.motto);
                formData.append("birthday", this.editUser.birthday);
                console.log("birth:" + this.editUser.birthday);
                formData.append("area", this.editUser.area);
                formData.append("intro", this.editUser.intro);
                formData.append("originalHeadImg", this.originalHeadImg);

                // this.$http.post("http://localhost:8081/user/update", formData).then(req=>{
                this.$http.post(this.GLOBAL.serverBaseUrl + this.GLOBAL.userUpdate, formData).then(req=>{
                    if (req.data !== ''){
                        if (req.data.rs.result_code === 200){ /*成功修改  则修改currentUser为editUser  修改originalHeadImg为当前值*/
                            this.$message.success(req.data.rs.msg);
                            this.indexUser = JSON.parse(JSON.stringify( this.editUser));
                            if (this.indexUser.role === '管理员'){
                                this.indexUser.role = "admin";
                            }else {
                                this.indexUser.role = "user";
                            }
                            this.originalHeadImg = req.data.newHeadImg;
                            console.log("newHeadImg:" + this.originalHeadImg);
                            this.edit = false; //退出编辑状态
                            /*
                            触发在父组件中定义的事件 updateInfo 并传递参数  this.editUser
                            emit： 放行 发出 发表
                            * */
                            this.$emit('updateInfo', this.editUser);
                        }else {   /*修改失败  则和 取消修改一样的操作  （退出编辑状态，重置editUser）*/
                            this.$message.error(req.data.rs.msg);
                            this.cancelEdit();
                        }
                    }else {
                        this.$message.error('糟糕，服务器出事了。。');
                    }
                });
            },

            /*取消编辑*/
            cancelEdit(){
                this.edit = false;
                /*重新重置 editUser  (即将在编辑页面做的修改全部撤销复原) */
                this.editUser = JSON.parse(JSON.stringify( this.indexUser));
                if (this.editUser.role === 'admin'){
                    this.editUser.role = "管理员";
                }else {
                    this.editUser.role = "普通用户";
                }
            },

            /*所在地区 多级选择 改变时触发*/
            handleChange(value) {
                console.log(value);
            },

            /*头像相关*/
            handleAvatarSuccess(res, file) {
                alert("上传成功。");
                this.editUser.headImg = URL.createObjectURL(file.raw);
            },
            handleAvatarError(){
                alert("上传失败。");
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleFileChange(file){
                console.log("handleFileChange123");
                //不知为什么， 在这里 直接file.type无法直接获取文件类型（undefined）， 不过可以 file.name 获取文件名
                var o = file.name;
                var pos=o.lastIndexOf('.');  //转义一下
                var fileType = o.substring(pos+1);
                fileType = fileType.toLowerCase(); //一律转为小写
                console.log("文件类型：" + fileType);

                const isJPG = (fileType === 'jpg' || fileType === 'png');
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG或者PNG 格式!');
                    return;
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                    return;
                }
                this.editUser.headImg = URL.createObjectURL(file.raw); // 修改图片地址为本地生成地址
            },
        }
    }
</script>

<style scoped>
    h1 {
        font-size: 25px;
    }


    /*头像上传框样式*/
    .avatar-uploader{
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 150px;
        height: 150px;
    }
    .avatar-uploader:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;
    }
    .avatar {
        width: 150px;
        height: 150px;
        display: block;
    }


    /*下方个人信息详细行*/
    .info_row{
        margin-top: 49px;
    }

    /*h1标签  “个人资料”字样 所在el row*/
    .h1_row{
        margin-top: 20px;
        margin-bottom: 20px;
    }
</style>